<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bandwidth Calculator</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="copyright" content="Vega Corporation" />
<meta name="author" content="pcdinh" />
<meta name="description" content="Information Technology" />
<meta name="keywords" content="clip.vn, vietnam video, clip, video sharing, video site, watch video, watch clip" />
<script src="http://www.google.com/jsapi?key=ABQIAAAAB1yd9NLsYC3k6hpSFDBbiRTNf9EFkGE1DlssPPTvaFzp50U72BSBG-mFFQgd8wjtcEHJJs1G83cNuQ" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">

// populates select list from array of items given as objects: { '320': '480', '480': '360' }
function populateSelect(el, items) {
    el[0].options.length = 0;

    jQuery.each(items, function (name, value) {
        el[0].options[el[0].options.length] = new Option(name, name);
    });
    
    el.find('option:first').attr("selected", "selected").end();
}

function getScreenResolution(aspectRatio) {
    if ('4:3' == aspectRatio) {
        return {'320' : '240', '384' : '288', '448' : '336', '480' : '360', '512' : '384', '640' : '480'};        
    } 
    
    return {'512' : '288', '640' : '360', '768' : '432'};    
}

function calcVideoBitRate(width, height, fps, codec) {
    // Compression ratio
    var divisor;
    
    switch (codec) {
        case 'Sorenson Spark (H.263)':
		    // YouTube uses it
            divisor = 6000;
            break;
            
        case 'On2 VP6-E':
            divisor = 7500;
            break;

        case 'On2 VP6-S':
            divisor = 7000;
            break;
			
        case 'AVC/H.264 Base profile':
            divisor = 6500;
            break;
			
        case 'AVC/H.264 Main profile':
            divisor = 8000;
            break;			
            
        case 'AVC/H.264 High profile':            
            divisor = 8250;
            break;            

        default:
            throw "UnsupportedCodecException";            
    }
    
    return (width * height * fps) / divisor;
}

function calcAudioBitRate(samplingRate, codec, channels, bitDepth) {
    // Compression ratio
    var divisor;
    
    switch (codec) {
        case 'MP3':
            divisor = 11;
            break;
            
        case 'AAC LC':
            divisor = 15;
            break;

        case 'AAC Main':
            // For Web video, you should always use 16-bit audio, which enables an audio track to use a range of 65,536 values
            divisor = 16;
            break;
            
        case 'HE-AAC v2':
            // YouTube uses it (just a guess)
            divisor = 17;
            break;            

        default:
            throw "UnsupportedCodecException";            
    }
    
    var bitRate = (samplingRate * bitDepth * channels) / divisor / 1000;
    var bitRateList = [8, 16, 18, 20, 24, 32, 40, 48, 56, 64, 80, 96, 112, 128, 160, 192, 256, 320]; // bit rate listed in the specification
    var max = bitRateList.length;
    var index = 0;
    while (index < max) {
        if (bitRateList[index] >= bitRate) {
            return [bitRateList[index], bitRate];
        }
        index++;
    }
    
    return ['-', bitRate];
}

function updateAudioBitRate() {
    var samplingRate = jQuery('#samplingRate').val();
    var audioCodec = jQuery('#audioCodec').val();
    var channels = jQuery('#channels').val();
    var bitDepth = jQuery('#bitDepth').val();
    var audioBitRate;
    
    try {
        audioBitRate = calcAudioBitRate(samplingRate, audioCodec, channels, bitDepth);
    } catch (e) {
        audioBitRate = 'Error'
    }
    // Specification bit rate
    jQuery('#audioBitRate').html(audioBitRate[0]);
    jQuery('#realAudioBitRate').html(audioBitRate[1].toFixed(3));
    jQuery('#noOverheadAudioBitRate').html(audioBitRate[1].toFixed(3));
}
function updateVideoBitRate() {
    var width = jQuery('#width').val();
    var height = jQuery('#height').val();
    var fps = jQuery('#fps').val();
    var codec = jQuery('#videoCodec').val();
    var videoBitRate;
    mp4OverheadWithBframes = 10.4;
    mp4OverheadWithoutBframes = 4.3;
    
    try {
        videoBitRate = calcVideoBitRate(width, height, fps, codec);
    } catch (e) {
        videoBitRate = 'Error'
    }
    
    var overheaded = (mp4OverheadWithBframes * fps * 8) / 1024; // 10.4 byte overhead per frame to Kbit
    overheaded += videoBitRate;
    jQuery('#videoBitRate').html(overheaded.toFixed(0));
    jQuery('#noOverheadVideoBitRate').html(videoBitRate.toFixed(0));
}
function updateScreenHeight() {
    var screenResolutions = getScreenResolution(jQuery('#aspectRatio').val());

    var width = jQuery('#width').val(); 
    var height = screenResolutions[width.toString()];
  
    if (screenResolutions[width.toString()]) {
        jQuery('#height').val(height);
    }
    
    if (0 != height % 16) {
        jQuery('#videoWarning').html("Đây không phải là tỉ lệ màn hình tốt cho Flash video vì chiều cao của chúng không phải là bội số của 16");
    } else {
        jQuery('#videoWarning').html("");
    }    
}

function updateScreenResolutionList() {
    var screenResolutions = getScreenResolution(jQuery('#aspectRatio').val());    
    populateSelect(jQuery('#width'), screenResolutions);
    updateScreenHeight();    
}

function updateCalculatedBandwith() {
    var bandwidth = (parseInt(jQuery('#videoBitRate').html()) + parseInt(jQuery('#audioBitRate').html())).toFixed(0);
    jQuery('#theoricalBandwidth').html(bandwidth + ' Kbps (' + (bandwidth/8).toFixed(0) + ' KBps)');
    var practicalBandwidth = ((bandwidth * 100 / 70)/8).toFixed(0); // 70%
    jQuery('#practicalBandwidth').html(((bandwidth * 100 / 70)).toFixed(0) + ' Kbps (' + practicalBandwidth + ' KBps)');
    jQuery('#serverBandwidth').html((parseInt(jQuery('#client').val()) * practicalBandwidth / 1024).toFixed(0) + ' MBps');
}

function updateNeededServers() {
    var mbytePerClient = parseFloat(jQuery("#serverBandwidth").html().replace(' MBps', '')) / parseInt(jQuery("#client").val())
    var mps = mbytePerClient * parseInt(jQuery("#totalClients").val());
    jQuery("#networkBandwidth").html(mps.toFixed(0) + ' MBps');
    jQuery("#serverCount").html((parseInt(jQuery("#totalClients").val()) / parseInt(jQuery("#client").val())).toFixed(0));
}
function updatePracticalIOPS() {
    var piops = parseInt(jQuery("#iops").val()) * 8 / 10; // practical IOPS: 80%
    jQuery("#piops").val(piops); 
    var readIO = piops * parseInt(jQuery("#readRatio").val()) / 100;
    var bandwidth = (parseInt(jQuery('#videoBitRate').html()) + parseInt(jQuery('#audioBitRate').html())).toFixed(0);
    jQuery("#readThroughput").val(readIO * bandwidth / 1024);
}
jQuery(document).bind('ready', function() {
    updateScreenResolutionList();
    updateAudioBitRate();
    updateScreenHeight();
	updateVideoBitRate();
    updateCalculatedBandwith();
    updateNeededServers();
    updatePracticalIOPS();
    
    jQuery('.data').bind('change', function() {        
        updateScreenHeight();
		updateVideoBitRate();
        updateAudioBitRate();
        updateCalculatedBandwith();
        updateNeededServers();
        updatePracticalIOPS();
    });
    
    jQuery('.ratio').bind('change', function() {
        updateScreenResolutionList();
        updateVideoBitRate();
        updateAudioBitRate();
        updateCalculatedBandwith();
        updateNeededServers();
        updatePracticalIOPS();
    });    
});
</script>
<style type="text/css">
* {
	margin:0px;
	padding:0px;
}
body {
	margin: 0 auto;
}
p {
	margin:5px 0px;
}
p, dd, li {
	font-size:1em;
	line-height:1.5em;
}
ul, ol {
	list-style-position: inside;
	padding:10px 0px;
}
h1 {
	font-size: 28px;
	font-weight:bold;
	margin:10px 0px;
}
.wrapper {
	width:980px;
	margin: 0 auto;
	overflow: auto;
}
.innerWrap {
	margin: 10px 0px;
	border: 1px solid #dfdfdf;
	padding:10px;
	width:958px;
}
.row {
	width: 940px;
	margin:30px 0px;
	clear: both;
	border: 1px solid #dfdfdf;
	padding:10px;
	position:relative;
	overflow:auto;
	background:url("./bg_gradient.gif") repeat-x scroll 0 100% #EAF2F5;
	border-bottom:1px solid #BEDCE7;
	border-left:1px solid #BEDCE7;
	border-right:1px solid #BEDCE7;
}
.form {
	margin-top:40px;
}
.row .head {
	float:left;
	width: 100px;
	font-weight:bold;
	font-size:19px;
}
.label, select {
	margin-right:10px;
}
.row .controls {
	padding-left:100px;
}
.row .controls label {
	font-weight: bold;
}
.row input.s {
	width: 30px;
}
.row .summary label {
	font-weight:bold;
	width: 170px;
	display: block;
	float:left;
}
.row .summary span {
	width: 200px;
	display: block;
	float:left;
}
.row .summary input {
	width: 60px;
	display: block;
	float:left;
	margin-right:133px;
} 
#videoWarning {
	color:red;
}
.footer {
	margin:10px 0px;
	clear: both;
	border: 1px solid #dfdfdf;
	padding:10px;
}
</style>
</head>
<body>
<div class="wrapper">
    <div class="innerWrap">
        <h1>FLV Bandwidth Calculator</h1>
        <div>
            <p>Công cụ này được viết dựa trên <a href="http://www.adobe.com/devnet/flash/apps/flv_bitrate_calculator/">Flash video (FLV) bitrate calculator</a> với một vài bổ sung và sửa đổi: </p>
            <ul>
                <li>Bổ sung về screen resolution, FPS, video/audio codec</li>
                <li>Sử dụng độ nén tiêu chuẩn cho AVC/H.264 Base profile là 6500, thay vì còn số 6875 ko rõ tác giả có dụng ý gì (bug ???)</li>
                <li>Mặc định sử dụng Average Motion (max 30 FPS - Fast motion như Movie trailer có thể cần tới 58 - 60 FPS)</li>
                <li>Encoding method: 2-pass VBR</li>
                <li>Giới hạn màn hình ở mức Standard Definition (SD) thay vì High Definition (HD)</li>
                <li>Thêm tính toán cụ thể cho MP4 container overhead mà tác giả bỏ qua</li>
                <li>Tính mức network transmission overhead là 30% thay vì mức 20% của tác giả (với VoIP họ tính 27%). Đây là một phép tính đơn giản thay vì tập trung vào
                tính phức tạp của Layer 3 overhead (IP, RTP and UDP headers) và Layer 2 overhead (Frame-Relay, Ethernet, HDLC etc. headers)</li>
            </ul>
        </div>
        <div id="form">
            <div class="row">
                <div class="head">Video</div>
                <div class="controls">
                    <label>Aspect ratio</label>
                    <select name="aspectRatio" id="aspectRatio" class="ratio">
                        <option value="4:3">TV (4:3)</option>
                        <option value="16:9">Movie (16:9)</option>
                    </select>
                    <label>Width</label>
                    <select name="width" id="width" class="data">
                        <option value="320">320</option>
                        <option value="384">384</option>
                        <option value="448">448</option>
                        <option value="512">512</option>
                    </select>
                    <label>Height</label>
                    <input name="height" id="height" class="data s" readonly="readonly" value="" />
                    <label>Frame Rate</label>
                    <select name="fps" id="fps" class="data">
                        <option value="15">15 FPS</option>
                        <option value="24">24 FPS</option>
                        <option value="25">25 FPS</option>
                        <option value="29.97">29.97 FPS</option>
                    </select>
                    <label>Codec</label>
                    <select name="videoCodec" id="videoCodec" class="data">
                        <option value="Sorenson Spark (H.263)">Sorenson Spark (H.263)</option>
                        <option value="On2 VP6-E">On2 VP6-E</option>
                        <option value="On2 VP6-S">On2 VP6-S</option>
                        <option value="AVC/H.264 Base profile">AVC/H.264 Base profile</option>
                        <option value="AVC/H.264 Main profile">AVC/H.264 Main profile</option>
                        <option value="AVC/H.264 High profile">AVC/H.264 High profile</option>
                    </select>
                    <div style="clear:both"></div>
                    <div>Video Bit Rate: <span id="videoBitRate"></span> (<span id="noOverheadVideoBitRate"></span>) Kbps</div>
                    <div>Supported by Flash Player 9.0.115</div>
                    <div id="videoWarning"></div>
                </div>
            </div>
            <div class="row">
                <div class="head">Audio</div>
                <div class="controls">
                    <label>Codec</label>
                    <select name="audioCodec" id="audioCodec" class="data">
                        <option value="MP3">MP3</option>
                        <option value="AAC LC">AAC Low Complexity (LC)</option>
                        <option value="AAC Main">AAC Main</option>
                        <option value="HE-AAC v2">High Efficiency AAC v2</option>
                    </select>
                    <label>Sampling Rate</label>
                    <select name="samplingRate" id="samplingRate" class="data">
                        <option value="11025">11,025 Khz</option>
                        <option value="22050">22,050 Khz</option>
                        <option value="44100">44,100 Khz</option>
                    </select>
                    <label>Channels</label>
                    <select name="channels" id="channels" class="data">
                        <option value="1">Mono</option>
                        <option value="2">Stereo</option>
                    </select>
                    <label>Quality</label>
                    <select name="bitDepth" id="bitDepth" class="data">
                        <option value="8">Low (8)</option>
                        <option value="16">Medium (16)</option>
                        <option value="24">High medium (24)</option>
                        <option value="32">High (32 Music Video)</option>
                    </select>
                    <div style="clear:both"></div>
                    <div>Audio Bit Rate: <span id="audioBitRate"></span> (<span id="realAudioBitRate"></span> - <span id="noOverheadAudioBitRate"></span>) Kbps</div>
                    <div>Supported by Flash Player 9.0.115</div>
                    <div>Quoted from a researcher: <em>For a speech, a sampling rate of 8,000, 11,025 or 12,000 Hz. For singing, you want a higher sampling rate like 16,000, 22,050 or 24,000. For instrumental music, or movie soundtracks you want at least 32,000 Hz sampling or the 44,100 or 48,000 standards. A CD stores music uncompressed at a sampling rate of 44,100 Hz</em> </div>
                </div>
            </div>
            <div class="row">
                <div class="head">1 file</div>
                <div class="controls summary">
                    <label>Theorical bandwidth</label>
                    <span id="theoricalBandwidth"></span>
                    <label>Practical bandwidth</label>
                    <span id="practicalBandwidth"></span></div>
            </div>
            <div class="row">
                <div class="head">1 server</div>
                <div class="controls summary">
                    <label>Simultaneous clients</label>
                    <input name="client" id="client" class="data s" value="2000" />
                    <label>Practical bandwidth</label>
                    <span id="serverBandwidth"></span></div>
            </div>
            
            <div class="row">
                <div class="head">Plan</div>
                <div class="controls summary">
                    <label>Simultaneous clients</label>
                    <input name="totalClients" id="totalClients" class="data s" value="33000" />
                    <label>Practical servers</label>
                    <span id="serverCount"></span></div>       
            </div> 

            <div class="row">
                <div class="head">&nbsp;</div>
                <div class="controls summary">
                    <label>Network bandwidth</label>
                    <span id="networkBandwidth" class="dataHolder">&nbsp;</span>
                </div>                    
            </div>
            
            <div class="row">
                <div class="head">Hard Disk</div>
                <div class="controls summary">
                    <label>IOPS</label>
                    <input name="iops" id="iops" class="data s" value="150" />
                    <label>Read ratio</label>
                    <input name="readRatio" id="readRatio" class="data s" value="80" /> (%)
                    <br /><br />
                    <label>Practical IOPS</label>
                    <input name="piops" id="piops" class="data s" value="" />
                    <label>Practical Read / 1 Disk</label>
                    <input name="readThroughput" id="readThroughput" class="data s" value="80" /> (MB/s) 
                </div>                    
            </div>            
        </div>
        <h1>YouTube preferences</h1>
        <p>In Normal Mode, YouTube resizes your videos to 320x240 pixels, encodes them to Flash 7 at a data rate of approximately 250 kbps and compresses audio to mp3 (22.050 KHz, monophonic).</p>
        <p>In <i>Hi-Res Mode</i>, YouTube creates 2 new copies of your video:
        <ul>
            <li>448x336 pixels, Flash 7 video @ 900Kbps. Audio @ 44.1KHz Mono.</li>
            <li>480x360 pixels, H.264 video @ 512Kbps. Audio @ 44.1KHz Stereo.</li>
        </ul>
        </p>
        <p><strong>&amp;fmt=6</strong> increases the resolution from 320x240 to 448x336, Flash 7 video @ 900Kbps; audio @ 44.1KHz 96Kbps Mono CBR. <a href="http://www.youtube.com/watch?v=MfWXRybZS4A&amp;fmt=6" target="_blank">http://www.youtube.com/watch?v=MfWXRybZS4A&amp;fmt=6</a><br>
            <br>
            <strong>&amp;fmt=18</strong> increases the resolution to 480x360, H.264 video @ 512Kbps; audio @ 44.1KHz 128Kbps Stereo. <a href="http://www.youtube.com/watch?v=MfWXRybZS4A&amp;fmt=18" target="_blank">http://www.youtube.com/watch?v=MfWXRybZS4A&amp;fmt=18</a><br>
            <br>
            <strong>&amp;fmt=22</strong> increases the resolution to 1280×720 (720p), H.264 video @ 1024Kbps; audio @ 44.1KHz 232Kbps Stereo. <a href="http://www.youtube.com/watch?v=MfWXRybZS4A&amp;fmt=22" target="_blank">http://www.youtube.com/watch?v=MfWXRybZS4A&amp;fmt=22</a></p>
        <h1>Vimeo preferences</h1>
        <p><strong>Vimeo recommends the following compression settings:</strong></p>
        <ul>
            <li>H.264 for the video codec (compression method).  Choose AAC for the audio codec.</li>
            <li><strong>Frame rate: </strong>usually 29.97. Vimeo converts all HD videos only up to 25 frames per second in order to optimize playback performance.</li>
            <li><strong>Data rate:</strong> 1800 kbits/sec for standard definition 4:3 video , 2500 kbits/sec for widescreen DV, or 5000 kbits/sec for high definition. Making these numbers higher will increase both quality and size.</li>
            <li><strong>Size:</strong> 640×480 for standard definition 4:3 video, 872×480 for widescreen DV, or 1280×720 for high definition. It is also best to export 1920×1080 or 1440×1080 video as 1280×720 too.</li>
            <li><strong>Sound sample rate: </strong>44.100 kHz</li>
            <li><strong>Audio quality:</strong> bit rate of 128 kbps.</li>
        </ul>
        <h1>Veoh preferences</h1>
        <ul>
            <li>File Format: flv (Flash video)</li>
            <li>Video Codec: Sorenson H.263 (FLV1)</li>
            <li>Video Resolution: 540 x 406</li>
            <li>Video Bitrate: 534 kbps
            <li>Max. GOP: 12 frames</li>
            <li>Frame-rate: 12 fps</li>
            <li>Audio Format: MPEG-2 Audio layer 3
            <li>Audio Channels: Mono
            <li>Audio Bitrate: 64 kbps (CBR)
            <li>Audio Sampling Rate: 22.05 kHz
            <li>Audio Resolution: 16 bit</li>
        </ul>    
    </div>
    <div class="footer">Written by pcdinh for the clip.vn restructuring project</div>
</div>
</body>
</html>